
<ion-toolbar>
  <ion-segment [(ngModel)]="category" color="middle-dark">
    <ion-segment-button value="people"><ion-icon name="ios-happy-outline"></ion-icon></ion-segment-button>
    <ion-segment-button value="nature"><ion-icon name="ios-paw-outline"></ion-icon></ion-segment-button>
    <ion-segment-button value="activity"><ion-icon name="ios-baseball-outline"></ion-icon></ion-segment-button>
    <ion-segment-button value="symbols"><ion-icon name="ios-heart-outline"></ion-icon></ion-segment-button>
    <ion-segment-button value="flags"><ion-icon name="ios-flag-outline"></ion-icon></ion-segment-button>
    <ion-segment-button value="food"><ion-icon name="ios-pizza-outline"></ion-icon></ion-segment-button>
    <ion-segment-button value="objects"><ion-icon name="ios-planet-outline"></ion-icon></ion-segment-button>
    <ion-segment-button value="travel"><ion-icon name="ios-car-outline"></ion-icon></ion-segment-button>
  </ion-segment>
</ion-toolbar>

<div [ngSwitch]="category">
  <div *ngFor="let c of emojis | keys">
    <div class="emoji-container"  *ngSwitchCase="c">
      <button class="emoji-btn" *ngFor="let emoji of emojis[c] | keys" (click)="insertEmoji(emoji)" ion-button small clear><emoji name="{{emoji}}"></emoji></button>
    </div>
  </div>
</div>

